<template>
  <div class="page-render-wrap" v-if="lowCodeRender">
    <el-form
      ref="formRef"
      :model="lowCodeRender?.model"
      :label-width="lowCodeRender?.globalConfig?.labelWidth + 'px'"
      :label-position="lowCodeRender?.globalConfig?.labelPosition"
      :size="lowCodeRender?.globalConfig?.size"
    >
      <template
        tag="div"
        v-for="(element, index) in lowCodeRender?.root?.items"
        :key="index"
      >
        <div v-if="element && element.key">
          <render-parse
            :element="element"
            :key="element?.key"
            :index="index"
            :parent="lowCodeRender?.root?.items"
          >
          </render-parse>
        </div>
      </template>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, provide, reactive } from "vue";
import { Component, createLowCode } from "@/components/low-code/core/index";

export default defineComponent({
  name: "page-render",
  props: ["pageJson"],
  setup(props, { expose }) {
    const lowCodeRender = createLowCode({
      ...props.pageJson,
      isDesigner: false,
    });

    const rootCompnent: Component = lowCodeRender.dataCenter[
      lowCodeRender!.root!.key
    ] as Component;

    provide("getLowCodeInstance", () => {
      return lowCodeRender;
    });

    // 使用 expose 暴露给外部
    expose({
      lowCodeRender,
    });
    return {
      lowCodeRender,
    };
  },
});
</script>

<style scoped>
.page-render-wrap {
}
</style>
